<template>
  <div class="student-body">
        <h2 class="box_tit">
            <i class="icon icon1"></i>调查问卷管理
            <i class="reti"></i>
        </h2>

        <el-form :inline="true" :model="queryFormData" class="demo-form-inline" ref="from" @keyup.enter.native="onSubmit">
            <el-form-item label="问卷名称：" prop="questionnaireName" clearable>
                <el-input v-model="queryFormData.questionnaireName" placeholder="请输入名称" clearable></el-input>
            </el-form-item>

                <el-form-item label="开始时间："  prop="beginTime" class="lineblock" clearable>
                    <el-date-picker type="date" placeholder="请选择日期" v-model="queryFormData.beginTime" style="width: 100%;"></el-date-picker>
                </el-form-item>

                <el-form-item label="结束时间：" prop="endTime" class="lineblock textareaBox" clearable>
                    <el-date-picker type="date" placeholder="请选择日期" v-model="queryFormData.endTime" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="状态"  prop="status" class="lineblock">
                    <el-select v-model="queryFormData.status" placeholder="请选择调查问卷" filterable clearable>
                      <el-option v-for="school in statusList" :label="school.text" :value="school.id" :key="school.id"></el-option>
                    </el-select>
                </el-form-item>

            <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resertSearch">重置</el-button>
                </el-form-item>
        </el-form>
            <div class="components_btns clearfix">
              <a href="javascript:void(0);" class="btns add" v-has="'sendQuestionnaire:add'"  @click="showEditQuestionnaireDialog()">发起</a>
            </div>
        <div class="scrollBarX">
                <vue-table
                      :api-url="questionnaireTable.apiUrl"
                      :fields="questionnaireTable.fields"
                      :appendParams="queryFormData"
                      :content="self"
                      ref="questionnaireTable">
                </vue-table>
        </div>
        <initiate-questionnaire-edit ref="initiateQuestionnaireEdit"></initiate-questionnaire-edit>

  </div>
</template>
<script>
    import {enums} from '@/constant'
    import moment from 'moment'
    import initiate_questionnaire_edit from './initiate-questionnaire-edit'

    import store from '@/vuex/store'
    export default{
      components:{
        "initiate-questionnaire-edit":initiate_questionnaire_edit,
      },
        data(){
            return {
                self:this,
                queryFormData:{
                  questionnaireName:null,
                  beginTime:null,
                  endTime:null,
                  status:null
                },
                questionnaireTable: {
                    apiUrl: api.questionnaire.queryInitiateQuestionnaire,
                    fields: [
                        {
                            prop: "questionnaireName",
                            label: "调查问卷名称",
                            width:"350"
                        },
                        {
                            prop: "beginTime",
                            label: "开始时间",
                            formatter: function(row, column, cellValue){
                                return moment(cellValue).format('YYYY-MM-DD HH:mm');
                            }
                        },
                        {
                            prop: "endTime",
                            label: "结束时间",
                            formatter: function(row, column, cellValue){
                                return moment(cellValue).format('YYYY-MM-DD HH:mm');
                            }
                        },
                        {
                            prop: "status",
                            label: "状态",
                            formatter: function(row, column, cellValue){
                                return cellValue==0?"未开始":cellValue==1?"进行中":cellValue==2?"已结束":"已作废"
                            }
                        },
                        {
                            prop: "remark",
                            label: "备注",
                        },
                        {
                            prop: "__component",
                            label: "操作",
                            componentName:"initiateQuestionnaire"
                        },
                    ],
                },
                statusList:enums.QUESTIONNAIRE_STATE
            }
        },
        created(){
        },
        methods:{
            showEditQuestionnaireDialog(id){
                this.$refs.initiateQuestionnaireEdit.showDialog(id);
            },
            onSubmit(){
              console.log(JSON.stringify(this.queryFormData));
                if(this.queryFormData.beginTime){
                  this.queryFormData.beginTime = moment(this.queryFormData.beginTime).format('YYYY-MM-DD')
                }
                if(this.queryFormData.endTime){
                  this.queryFormData.endTime = moment(this.queryFormData.endTime).format('YYYY-MM-DD')
                }
                this.$refs.questionnaireTable.$emit('vuetable:refresh')
            },
            //统计结果
            countQuestionnaireBatchResultById(id){
              let self = this;
                this.axios.post(api.questionnaire.countQuestionnaireBatchResult+id)
                        .then((response) => {
                            if (response.data.success) {
                                self.$message({
                                    type: 'success',
                                    message: response.data.msg,
                                });
                                self.$refs.questionnaireTable.$emit('vuetable:current-refresh');
                            } else {
                                self.$message.error(response.data.msg);
                            }
                })
            },
            //修改调查问卷状态
            changeStateById(id,state){
              let self = this;
              self.$confirm('是否执行此操作！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params={
                      id:id,
                      status:state
                    }
                    this.axios.post(api.questionnaire.updateQuestionnaireBatchStatus,params)
                        .then((response) => {
                            if (response.data.success) {
                                self.$message({
                                    type: 'success',
                                    message: response.data.msg,
                                });
                                self.$refs.questionnaireTable.$emit('vuetable:current-refresh');
                            } else {
                                self.$message.error(response.data.msg);
                            }
                        })
                }, () => {});
            },
            //查看进展  操作
            showProcess(id){
              this.$router.push('/jw/initiate/questionnaire/process/'+id);
            },
            showResult(id){
              this.$router.push('/jw/initiate/questionnaire/result/'+id);
            },
            resertSearch(){
              let self = this;
              if(this.$refs['from']!==undefined){
                    this.$refs['from'].resetFields();
                }
              this.$refs.questionnaireTable.$emit('vuetable:refresh')
            },
        }
    }


</script>
<style scoped>
.student-body {
  min-height: 545px;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 15px;
}
.student-body .contents span {
  display: inline-block;
  width: 100px;
  margin-top: 10px;
  text-align: right;
}
.student-body .contents .spanInput {
  height: 26px;
  width: 206px;
  line-height: 26px;
  font-size: 12px;
  color: #cdcdcd;
  text-indent: 5px;
  border-radius: 15px;
  border: 1px solid #cdcdcd;
  box-sizing: border-box;
  outline: none;
}

.student-body .contents .sexSpan {
  width: 20px;
  padding-left: 20px;
}
.student-body .contents .sexSpans{
  width: 50px;
}
.student-body .contents .lableInput {
  position: absolute;
  top: 12px;
  left: 105px;
}
.student-body .contents
.student-body .reti {
  width: 94px;
}
.student-body .inputs {
  width: 100%;
  height: 40px;
  padding-top: 20px;
}
.student-body .inputs > span {
  font-size: 12px;
  color: #333;
  padding-left: 1px;
}

.box_tit {
  border-bottom: 1px solid #e6e8ec;
  position: relative;
  padding: 4px 0 10px 30px;
  margin-top: 0;
  font-weight: bold;
  line-height: 16px;
}
</style>

